let _MoveboxShadow = null;

export default class MoveboxShadow {
    static getInstance() {
        if (!_MoveboxShadow)
            _MoveboxShadow = new MoveboxShadow();
        return _MoveboxShadow;
    }

    constructor() {
        this.dom = this.getDom();
    }

    getBoxPosiIndex(curDom) {
        const elem = document.querySelectorAll('.moveBox-root');
        this.boxPosi = [];
        for (let i = 0; i < elem.length; i++) {
            const element = elem[i];
            const left = Number(element.style.left.substring(0, element.style.left.length - 2));
            const top = Number(element.style.top.substring(0, element.style.top.length - 2));

            // console.log(curDom)
            if (curDom != null && curDom == elem[i]) {
                this.getShadowPosi(left, top);
                continue
            };

            const cur = {
                left: left,
                top: top,
                x: Math.round((left - 10) / 60),
                y: Math.round((top - 10) / 60),
            };
            this.boxPosi.push(cur);
        }
        return this.boxPosi;
    }

    getShadowPosi(x, y) {
        const dom = this.getDom();
        //计算坐标
        let curX = Math.round((x - 10) / 60);
        let curY = Math.round((y - 10) / 60);

        //判断当前坐标是否有人

        this.curposiIndex = [curX, curY];
        dom.setAttribute('style', `top:${curY * 60 + 10}px;left:${curX * 60 + 10}px;opacity:1;`);
        return this.curposiIndex;
    }

    clear() {
        const dom = this.getDom();
        const [curX, curY] = this.curposiIndex;
        dom.setAttribute('style', `top:${curY * 60 + 10}px;left:${curX * 60 + 10}px;opacity:0;`);
    }

    getDom() {
        if (!this.dom) {
            const div = document.createElement('div');
            div.setAttribute('class', 'moveBox-shadow');
            document.body.append(div);
            this.dom = div;
        }
        return this.dom;
    }

}